<template>
    <d2-container>
        <template slot="header">Page 2 header</template>
        <el-row :gutter="10">
            <el-col :span="6">
                <!-- 搜索框 -->
                <el-input placeholder="输入关键字进行过滤" v-model="filterText" size="small" style="margin-bottom:10px">
                </el-input>
                <!-- 树形菜单 -->
                <el-tree class="filter-tree" :data="data" :props="defaultProps" default-expand-all
                    :filter-node-method="filterNode" ref="tree">
                </el-tree>
            </el-col>
            <el-col :span="18">
                <div class="table-header">
                    <div>
                        <el-button type="primary" icon="el-icon-search" size="small">搜索</el-button>
                        <el-button type="primary" icon="el-icon-search" size="small">搜索</el-button>
                        <el-button type="primary" icon="el-icon-search" size="small">搜索</el-button>
                    </div>
                    <div>
                        <el-button size="small" round icon="el-icon-edit"></el-button>
                        <el-button size="small" round icon="el-icon-share"></el-button>
                        <el-button size="small" round icon="el-icon-share"></el-button>
                    </div>
                </div>
                <el-table :data="tableData" size="small" style="width: 100%" border highlight-current-row
                    :header-cell-style="{'background':'#fcfcfc','text-align':'center'}">
                    <el-table-column type="index" width="50">
                    </el-table-column>
                    <el-table-column prop="date" label="日期" width="180">
                    </el-table-column>
                    <el-table-column label="姓名" width="180">
                        <template slot-scope="scope">
                            <el-tag size="medium">{{ scope.row.name }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="地址">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="100">
                        <template slot-scope="scope">
                            <el-button @click="showInfo(scope.row)" type="text" size="small">查看</el-button>
                            <el-button type="text" size="small">编辑</el-button>
                        </template>
                    </el-table-column>
                    <div slot="empty">
                        <div class="avue-empty">
                            <div class="avue-empty__image" style="height: 50px;"><img
                                    src=""
                                    alt=""></div>
                            <p class="avue-empty__desc">暂无数据</p>
                        </div>
                    </div>
                </el-table>

                <!-- <template slot="footer"> -->
                <!-- <el-button type="primary" size="mini" :loading="uploading" @click="handleUpload"
                        style="float:left;">
                        <d2-icon name="cloud-upload" />
                        Upload {{log.length}} log data
                    </el-button> -->

                <ec-pagination :page="page" @size-change="handleSizeChange" @current-change="handleCurrentChange">
            </ec-pagination>
                <!-- </template> -->
            </el-col>
        </el-row>
    </d2-container>
</template>

<script>
    export default {
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            }
        },

        methods: {
            filterNode(value, data) {
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
            }

            ,
            showInfo(row) {
                // 路由跳转
                this.$router.push({
                    name: 'userDetail',
                    params: {
                        username: 'admin'
                    },
                    query: {
                        userid: '0001'
                    }
                })
            }

            ,
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            },

            //分页查询
            handleSizeChange(val) {
                this.page.limit = val;
                this.get();
            },
            handleCurrentChange(val) {
                this.page.page = val;
                this.get();
            },
        },

        data() {
            return {
                filterText: '',
                data: [{
                    id: 1,
                    label: '一级 1',
                    children: [{
                        id: 4,
                        label: '二级 1-1',
                        children: [{
                            id: 9,
                            label: '三级 1-1-1'
                        }, {
                            id: 10,
                            label: '三级 1-1-2'
                        }]
                    }]
                }, {
                    id: 2,
                    label: '一级 2',
                    children: [{
                        id: 5,
                        label: '二级 2-1'
                    }, {
                        id: 6,
                        label: '二级 2-2'
                    }]
                }, {
                    id: 3,
                    label: '一级 3',
                    children: [{
                        id: 7,
                        label: '二级 3-1'
                    }, {
                        id: 8,
                        label: '二级 3-2'
                    }]
                }],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },

                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }],
                search: '',
                page: {
                    current: 1,
                    limit: 10,
                    total: 0
                },

            };
        }
    };
</script>

<style>
    .header-row-style {
        background: #ccc;
    }

    .table-header {
        margin-bottom: 10px;
        overflow: auto;
        _height: 1%
    }

    .table-header>div:nth-of-type(1) {
        float: left;
    }

    .table-header>div:nth-of-type(2) {
        float: right;
    }
</style>